<template>
  <div class="details" v-if="item">
    <v-touch @swipeleft="hui" @swiperight="hui">
      <div class="top">
        <!-- 顶部图标 -->
        <div class="t_icon">
          <!-- 返回 -->
          <div class="hui" @click="hui"></div>
          <div class="icon_r">
            <!-- 收藏 -->
            <span class="sc"></span>
            <!-- 分享 -->
            <span class="fx"></span>
            <!-- 举报 -->
            <span class="jb"></span>
          </div>
        </div>
      <!-- 职位标题 -->
      <div class="title">
        <div class="t_t">
          <div class="t_l">{{item.title}}</div>
          <div class="t_r"> {{item.salary}}</div>
        </div>
        <div class="t_c">
          <div class="loc">
            <img :src="URL+'loc.svg'">
            <p>{{item.region.slice(0,3)}}·{{item.region.slice(4,)}}</p>
          </div>
          <div class="brie">
            <img :src="URL+'brie.svg'">
            <p>{{item.label[1]}}</p>
          </div>
        </div>
        <div class="hat">
          <img :src="URL+'hat.svg'">
          <p>{{item.label[0]}}</p>
        </div>
      </div>
      </div>
    <div class="bot">
      <!-- 人事详情 -->
      <div class="hr">
        <p class="imgHr" :style="{background:'url('+URL+item.img+'.svg) 0 0/100% no-repeat'}"></p>
        <div class="name">
          <p>
            {{item.hiring.name}}
            <span>今日活跃</span>
          </p>
          <p>{{item.enterprise.company}}·{{item.hiring.hr}}</p>
        </div>
        <p class="imgRig"></p>
      </div>
      <!-- 职位详情 -->
      <div class="det">
        <h4>职位详情</h4>
        <div class="list4">
          <p v-for="(lab,index) in item.label" :key="index">{{lab}}</p>
        </div>
        <div class="minute">
          <p>1.参加项目需求分析和评审,提出有价值的建议;</p>
          <p>2.进行测试工具选型,了解软件测试流程,负责公司研发产品的功能测试和接口测试;</p>
          <p>3.熟练编写测试测试用例和测试数据;</p>
          <p>4.搭建测试环境,执行测试之后输出测试报告;</p>
          <p>5.使用过功能测试及性能测试工具。</p>
          <p>6.应届实习均可投递。</p>
        </div>
      </div>
      <!-- 按钮 -->
      <div class="btn">
        <p>立即沟通</p>
      </div>
    </div>
    </v-touch>
  </div>
</template>
<script>
export default {
  props:["item"],
  // components:{
  //   // vueTouch,
  // },
  // name:'detail',
  methods:{
    hui(){
      // console.log(1);
      // this.$router.push({name:'job'})
      this.$store.commit('judge')
    },
  },
  mounted(){
    // console.log(this.item);
  }
}
</script>
<style lang="scss" scoped>
  .details {
    width: 100vw;
    .top {
      width: 100%;
      // 顶部小图
      padding: 10px 20px;
      .t_icon {
        width: 100%;
        // background: aqua;
        display: flex;
        justify-content: space-between;
        align-items: center;
        // 返回
        .hui {
          width: 15px;
          height: 15px;
          border-left: 2px solid #000;
          border-bottom: 2px solid #000;
          transform: rotate(45deg) scale(.8);
        }
        .icon_r{
          span {
            display: inline-block;
            width: 25px;
            height: 25px;
            background: url(#{$URL}job/icon2.png) 0 0/300% no-repeat;
            margin-left: 15px;
          }
          .sc {
            // background-size: 300%;
            background-position: 1px 1px;
          }
          .fx {
            background-size: 330%;
            // width: 25px;
            background-position: -27px 0px;
          }
          .jb {
            background-size: 280%;
            background-position: -44px 3px;
          }
        }
      }
      // 职位详情
      .title {
        width: 100%;
        margin-top: 20px;
        div {
          margin: 5px 0;
        }
        .t_t {
          width: 100%;
          display: flex;
          justify-content: space-between;
          .t_l{
            flex: 1;
            font: 500 24px/120% "";
          }
          .t_r {
            text-align: right;
            flex: 1;
            font: 600 16px/200% "";
            color: #35C2BB;
          }
        }
        .t_c {
          // width: 100%;
          display: flex;
          font-size: 14px;
          justify-content: space-between;
          // font-weight: bold;
          .loc {
            display: flex;
            img{
              width: 26px;
            }
            p{
              margin-top: 5px;
            }
          }
          .brie{
            display: flex;
            img{
              width: 26px;
            }
            p{
              margin-top: 5px;
            }
          }
        }
        .hat{
          display: flex;
          margin-top: 10px;
          img{
            width: 26px;
          }
          p{
            font-size: 14px;
          }
        }
      }
    }
    .bot {
      // hr人事
      .hr {
        width: 85%;
        display: flex;
        // justify-content: space-around;
        padding: 20px 20px 20px 0;
        margin-left: 25px;
        border-top: 1px solid rgb(237, 233, 233);
        border-bottom: 1px solid rgb(237, 233, 233);
        .imgHr{
          width: 45px;
          height: 45px;
          border-radius: 50%;
          // background-image: url(#{$URL}01.svg);
          // background-size: 100%;
        }
        .name{
          font-size: 14px;
          margin-left: 15px;
          p{
            span{
              font-size: 12px;
              color: rgb(225, 220, 220);
              padding-left: 6px;
            }
          }
        }
        .imgRig{
          width: 20px;
          height: 20px;
          background-image: url(#{$URL}right.png);
          background-size: 100%;
          margin-left: 110px;
          margin-top: 15px;
        }
      }
      // 职位详情
      .det {
        margin: 20px;
        height: 400px;
        .list4{
          display: flex;
          margin-top: 10px;
          p{
            // width: 80px;
            // height: 30px;
            padding: 1% 2%;
            text-align: center;
            // line-height: 30px;
            margin-left: 10px;
            font-size: 12px;
            border-radius: 4px;
            background-color: rgba(240, 239, 239, .5);
          }
          p:nth-child(1){
            margin-left: 0;
          }
        }
        .minute{
          margin-top: 20px;
          font-size: 15px;
          p:nth-child(1){
            letter-spacing: 2px;
            width: 90%;
            line-height: 1.5;
          }
          p:nth-child(2){
            letter-spacing: 2px;
            line-height: 1.5;
            width: 90%;
          }
          p:nth-child(3){
            letter-spacing: 2px;
            line-height: 1.5;
            width: 35%;
          }
          p:nth-child(4){
            letter-spacing: 2px;
            line-height: 1.5;
            width: 42%;
          }
          p:nth-child(5){
            letter-spacing: 2px;
            line-height: 1.5;
          }
          p:nth-child(6){
            letter-spacing: 2px;
            line-height: 1.5;
          }
        }
      }
      // 按钮
      .btn {
        width: 100%;
        height: 50px;
        position: fixed;
        bottom: 0;
        color: white;
        background-color: white;
        border: none;
        // margin-left: 10px;
        p{
        width: 89%;
        height: 40px;
        text-align: center;
        line-height: 40px;
        background-color: #35C2BB;
        margin-left: 20px;
      }
    }
  }
}
</style>